<template>
	<w-container class="flex flex-dir-col">
		<w-navbar id="my-nav" title="我的盲盒"></w-navbar>
		<view class="content flex-1">
			<view class="con flex flex-dir-col flex-ai-center flex-js-center">
				<w-image :src="info.listimg" radius="10" width="258" height="258"></w-image>
				<text class="font-size-16 font-color-black font-w-500 mt-40">{{handleLang('共有')}}{{ info.num }}{{handleLang('个')}}</text>
				<w-button  class="btnStyle2 mt-16" @click="$u.throttle(open, 5000)">{{handleLang('一键开启')}}</w-button>
				<text class="font-size-12 font-color-describe mt-8">{{handleLang('一次最多打开10个盲盒')}}</text>
			</view>
			<u-popup :show="showPop" @close="showPop=false">
				<view class="pop_con">
					<image :src="$ossUrl+'/static/gif/mh.gif'" mode="aspectFill"></image>
				</view>
			</u-popup>
		</view>
		<view class="bg-color-item ptb-10">
			<view class="flex-center-sb plr-20">
				<w-button class="btnStyle" pain @click="$u.route('/pages/consignments/consignments',{id:info.id,pageType:1})">{{handleLang('立即寄售')}}</w-button>
				<w-button class="btnStyle"  @click="$u.throttle(takeApart, 1000)">{{handleLang('逐个拆开')}}</w-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</w-container>
</template>

<script>
	import { openBox,openBoxs } from '@/api/box/index.js';
	export default {
		data() {
			return {
				showPop: false
			};
		},
		computed:{
			info(){
				return uni.getStorageSync('blindBoxInfo')
			}
		},
		methods:{
			// 一键开启
			open() {
				uni.showLoading({ title:'请求中...' })
				openBoxs(this.info.blindBoxId).then(res=>{
					this.showPop = true;
					setTimeout(()=>{
						this.showPop = false;
						uni.setStorageSync('blindBoxResultList',res.data);
						uni.redirectTo({ url:'/pages/blindBox/result' })
					},3000)
				}).catch(()=>{})
			},
			
			// 逐个拆开
			takeApart() {
				uni.showLoading({ title:'请求中...' })
				openBox(this.info.blindBoxId).then(res=>{
					this.showPop = true;
					setTimeout(()=>{
						this.showPop = false;
						uni.setStorageSync('blindBoxResult',res.data);
						uni.redirectTo({ url:'/pages/blindBox/result2' })
					},3000)
				}).catch(()=>{})
			}
		}
	}
</script>

<style lang="scss">
	.btnStyle{
		width: 320rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 50rpx;
	}
	.btnStyle2{
		width: 336rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 20rpx;
	}
	.content{
		position: relative;
		>.con{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	.pop_con{
		width: 100vw;
		height: 100vh;
		>image{
			width: 100%;
			height: 100%;
		}
	}
</style>
